<template>
  <div>
    <el-row :gutter="20" v-if="isAdmin">
      <el-col :span="24">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-user-solid grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ lists.balance || 0 }}</div>
                  <div>余额</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-coin grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ lists.dayPrice || 0 }}</div>
                  <div>当日收益</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-files grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ lists.monthPrice || 0 }}</div>
                  <div>当月收益</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-s-tools grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ lists.monthRepairPrice || 0 }}</div>
                  <div>当月维护费用</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-card shadow="hover">
      <template #header>
        <div class="clearfix">
          <span>资金流水</span>
          <!--<el-button style="float: right; padding: 3px 0" type="text">添加</el-button>-->
        </div>
      </template>

      <el-table :show-header="false" :data="records" style="width:100%;">
        <!--<el-table-column width="40">-->
        <!--  <template #default="scope">-->
        <!--    <el-checkbox v-model="scope.row.status"></el-checkbox>-->
        <!--  </template>-->
        <!--</el-table-column>-->
        <el-table-column>
          <template #default="scope">
            <div class="todo-item" :class="{
                                        'todo-item-del': scope.row.status,
                                    }">{{ scope.row.remarks }}
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template v-slot="{row}">
            ￥{{ row.price }}
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template v-slot="{row}">
            {{ row.createTime || '' }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {ref, toRaw, watch} from "vue";
import {mapState, useStore} from "vuex";
import Home from "../../api/modules/Home";
import {deepClone, isEmpty} from "../../utils/helpers";
import dayjs from "dayjs";

export default {
  name: "DashboardKit",
  computed: {
    ...mapState("user", [
      "userInfo",
      "isAdmin"
    ])
  },
  setup() {
    const store = useStore();
    const records = ref([]);
    const lists = ref({
      "monthPrice": 0,
      "balance": 0,
      "dayPrice": 0,
      "monthRepairPrice": 0,
      "tips": "balance管理员余额，dayPrice当日收益，monthPrice当月收益，monthRepairPrice当月维护费用"
    });
    const _lists = deepClone(toRaw(lists.value))
    watch(() => store.state.user.isAdmin, (isAdmin) => {
      if (isAdmin) {
        getBoardData();
      }
    }, {
      immediate: true,
    });
    watch(() => store.state.user.userInfo, (info) => {
      if (store.state.user.isAdmin) {
        getRecord('admin');
      } else if (info.id > 0) {
        getRecord(info.id);
      }

    }, {
      immediate: true,
    });

    // 管理员获取统计数据
    function getBoardData() {
      Home.board().then(({data}) => {
        lists.value = data || _lists;
      }).catch(console.log);
    }

    // 获取最新的20条流水记录
    function getRecord(userId) {
      Home.record({index: 1, limit: 20, filter: "", userId}).then(({data}) => {
        records.value = ((data || {}).data || []).map(v => {
          if (!isEmpty(v.createTime)) {
            v.createTime = dayjs(v.createTime).format('YYYY-MM-DD HH:mm:ss')
          }

          return v;
        });
      }).catch(console.log);
    }


    return {
      lists,
      records,
    };
  },
};
</script>

<style scoped>

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}


.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

</style>
